<template>
	<view class="sku_detail">
		<swiper class="swiper" circular :indicator-dots="banner.indicatorDots" :autoplay="banner.autoplay" :interval="banner.interval"
			:duration="banner.duration">
			<swiper-item v-for="item in banner.list">
				<view class="swiper-item uni-bg-red">
					<image style="width: 100%; height: 100%; background-color: #eeeeee;" :src="item.image"
					                        ></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="sku">
			<view class="sku_price">
				<text>￥{{detail.price}}</text>
				<text>￥{{detail.origanlPrice}}</text>
			</view>
			<view class="sku_name">{{detail.name}}</view>
			<view>货号：80080034104980134</view>
			<view>库存：100</view>
			<view class="line"></view>
			<view>详情:</view>
			<view class="detail_list">
				<image class="sku_image" v-for="image in imageList" :src="image.image"></image>
			</view>
		</view>
		<view class="uni-container">
				<view class="goods-carts">
					<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
						@buttonClick="buttonClick" />
				</view>
		
			</view>
	</view>
</template>

<script>
	import uniGoodsNav from '@/uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		components:{uniGoodsNav},
		data() {
			return {
				options: [{
									icon: 'chat',
									text: '客服'
								}, {
									icon: 'shop',
									text: '店铺',
									info: 2,
									infoBackgroundColor: '#007aff',
									infoColor: "#f5f5f5"
								}, {
									icon: 'cart',
									text: '购物车',
									info: 2
								}],
								buttonGroup: [{
										text: '加入购物车',
										backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
										color: '#fff'
									},
									{
										text: '立即购买',
										backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
										color: '#fff'
									}
								],
								customButtonGroup: [{
										text: '加入购物车',
										backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
										color: '#fff'
									},
									{
										text: '立即购买',
										backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
										color: '#fff'
									}
								],
								customButtonGroup1: [{
									text: '立即购买',
									backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
									color: '#fff'
								}],
				banner:{},
				detail:{},
				imageList:{}
			}
		},
		onLoad(options) {
			console.log("options", options);
			this.fetchDetailBanners();
		},
		methods: {
			fetchDetailBanners() {
				uni.request({
				  url: '/pages/sku/sku.json'+'?id=1', // 你的JSON文件地址
				  method: 'GET',
				  success: (res) => {
				    if (res.statusCode === 200) {
				      // 请求成功，处理数据
					  console.log("banner", res.data);
					  this.banner = res.data.sku.banner;
					  this.detail=res.data.sku.detail;
					  this.imageList=res.data.sku.image.list;
				    } else {
				      // 请求失败处理
				      console.error('请求失败1', res.statusCode);
				    }
				  },
				  fail: (err) => {
				    // 请求发生错误处理
				    console.error('请求出错2:', err);
				  }
				});
			},
		}
	}
</script>

<style type="scss">
	.swiper {
		height:700rpx;
	}
	.swiper-item {
		display: block;
		height: 700rpx;
		line-height: 700rpx;
		text-align: center;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
	
	.sku{
		background:#fff;
		width:100%;
		margin:5px;
		padding:5px;
		box-sizing: border-box;
	}
	.sku_price {
		color:#e2211c;
		font-size:38rpx;
		margin:5px;
		text:nth-child(2) {
			color:#ccc;
			font-size:28rpx;
			margin-left:18px;
			text-decoration: line-through;
		}
	}
	.sku_name {
		font-size:30rpx;
		margin:5px;
		border-bottom: 1px solid #eee
	}
	
	.line{
		border-bottom: 1px solid #eee
	}
	.sku_image{
		width:700rpx;
		height:700rpx;
	}
	
	.example-body {
			padding: 0;
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
		}
	
		.goods-carts {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;
		}
</style>
